<template>
  <div id='gradeList'>
    <!-- 搜索 -->
    <el-form
      :inline="true"
      class="demo-form-inline"
    >
      <el-form-item label="姓名">
        <el-input
          v-model="sname"
          placeholder="如:小明"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="课程">
        <el-select
          v-model="cno"
          placeholder="下拉选择"
          clearable
        >
          <el-option
            v-for="item in courseList"
            :key="item.cno"
            :label="item.cname"
            :value="item.cno"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="queryGrade"
        >查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 分页列表 -->
    <comTable
      :column="column"
      :tableData="tableData"
      :pageSize="pageSize"
      :pageSizes="pageSizes"
      :currentPage="currentPage"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :selection="true"
      @selection-change="handleSelectionChange"
    >
      <template v-slot:slot_operate="scope">
        <el-button
          type="primary"
          icon="el-icon-edit"
          circle
          @click="editGrade(scope.row)"
        ></el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          circle
          @click="delGrade(scope.row)"
        ></el-button>
      </template>
    </comTable>

    <!-- 弹框 -->
    <gdialog @click="updateGrade">
      <el-form
        :inline="true"
        :model="gradeForm"
        ref="gradeForm"
        :rules="rules"
        status-icon
        class="demo-form-inline"
        label-position="right"
        label-width="80px"
        id="dialogForm"
      >
        <el-form-item
          label="成绩"
          prop="score"
        >
          <el-input v-model="gradeForm.score"></el-input>
        </el-form-item>
      </el-form>
    </gdialog>
  </div>
</template>

<script>
import gdialog from "@/components/dialog/TeaDialog.vue"
import comTable from "@/components/common/comTable.vue"
import { confirm } from "@/util/confirm"
import { getCourseList } from "@/api/course"
import { getGradePage, editGrade, delGrade } from "@/api/grade"

export default {
  name: 'gradeList',
  components: { comTable, gdialog },
  data() {
    return {
      column: [
        { label: '课程号', prop: 'cno', sortable: true },
        { label: '课程名', prop: 'cname' },
        { label: '学号', prop: 'sno', sortable: true },
        { label: '姓名', prop: 'sname' },
        { label: '成绩', prop: 'score', sortable: true },
        { label: '操作', prop: 'operate', type: 'slot', slot_name: "slot_operate" }
        // { label: '操作', prop: 'operate', type: 'slot', slot_name: "slot_operate" ,hide:true},
      ],
      tableData: [],
      pageSize: 8,
      pageSizes: [8, 16, 24, 32],
      currentPage: 1,
      total: 0,
      courseList: [],
      sname: '',
      cno: '',
      gradeForm: {},
      rules: {
        score: [
          { required: true, message: '请输入成绩', trigger: 'blur' }
        ]
      },
    }
  },
  created() {
    // 下拉列表
    getCourseList().then(res => {
      this.courseList = res.data.data.courseList
    })

  },
  methods: {
    queryGrade() {
      this.GetGradePage()
    },
    GetGradePage() {
      getGradePage(this.currentPage, this.pageSize, this.sname, this.cno).then(res => {
        // console.log(res);
        this.tableData = res.data.data.page.list
        this.total = res.data.data.page.total
      })
    },
    // 显示修改
    editGrade(row) {
      // console.log(row);
      this.$bus.$emit('visibleDialog', '修改成绩')
      // 清楚数据
      this.$nextTick(() => {
        this.$refs['gradeForm'].clearValidate()
      })
      // // 复制一份数据显示
      this.gradeForm = JSON.parse(JSON.stringify(row))
    },
    // 修改
    updateGrade() {
      editGrade(this.gradeForm).then(res => {
        this.$refs['gradeForm'].validate(valid => {
          if (valid) {
            if (res.data.code == 100) {
              // 刷新数据
              this.GetGradePage()
              this.$message.success('更改成功')
              // 关闭
              this.$bus.$emit('visibleDialog', '', false)
            } else {
              // 关闭
              this.$message.error('更改失败')
              this.$bus.$emit('visibleDialog', '', false)
            }
          }
        })
      })
    },
    // 删除
    delGrade(row) {
      confirm(this, function () {
        delGrade(row.sno, row.cno).then(res => {
          // console.log("del", res);
          if (res.data.code == 100) {
            this.$message.success("删除成功")
            // 刷新(刷新携带查询参数)
            this.GetGradePage()
          } else {
            this.$message.error("删除失败")
          }
        })
      }.bind(this))
    },
    // 页面大小
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.GetGradePage()
    },
    // 页码
    handleCurrentChange(currentPage) {
      // 切换页码
      this.currentPage = currentPage
      this.GetGradePage()
    },
    // 全选
    handleSelectionChange(selectedList) {
      console.log(selectedList);
    }
  }
};
</script>
<style scoped>
.el-form--inline ::v-deep .el-form-item {
  margin: 0;
  padding: 10px;
}
.el-form--inline ::v-deep .el-form-item__label {
  background-color: #f4f4f5;
  padding: 0 10px;
  color: #94979d;
  text-align: center;
}

#dialogForm ::v-deep .el-form-item__label {
  background-color: white;
  color: black;
}
</style>
